{% extends 'base.html' %}
{% block title %}
    <title>手机注册</title>
    <style type="text/css">
        .verify_code_img {
            width: 100%;
            height: 100%;
        }
        .errorlist {
            color: red;
        }
    </style>
{% endblock %}
{% block container %}
    <!--主体-->
    <header class="wy-header">
        <div class="wy-header-icon-back"><span></span></div>
        <div class="wy-header-title">手机注册</div>
    </header>
    <form class="weui-content" action="." method="POST">
{#    Dv0Mo2Hskxb0tcOmYf7X5jzDl1hhBq6qblOHHQwMPtlUQsjwL8vi1AzrzXJBw6hP#}
    {% csrf_token %}
        <div class="weui-cells weui-cells_form wy-address-edit">
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd">
                    <label class="weui-label wy-lab">手机号</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                            class="weui-input"
                            type="text"
                            name="username"
                            maxlength="11"
                            value="{{ form.username.value|default_if_none:'' }}"
                            placeholder="请输入手机号" />
                </div>
                <div class="weui-cell__ft">
                    <button class="weui-vcode-btn">获取验证码</button>
                </div>
            </div>
            {{ form.username.errors }}
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label wy-lab">昵称</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                        class="weui-input"
                        type="text"
                        placeholder="请输入昵称"
                        name="nickname"
                        value="{{ form.nickname.value|default_if_none:'' }}"
                    />
                </div>
            </div>
            {{ form.nickname.errors }}
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd">
                    <label class="weui-label wy-lab">验证码</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                        class="weui-input"
                        type="text"
                        placeholder="请输入验证码"
                        name="verify_code"
                        value="{{ form.verify_code.value|default_if_none:'' }}"
                    />
                </div>
                <div class="weui-cell__ft">
                    <img class="weui-vcode-img verify_code_img" src="{% url 'system:verify_code' %}" data-src="{% url 'system:verify_code' %}" />
                </div>
            </div>
            {{ form.verify_code.errors }}
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label wy-lab">设置密码</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                        class="weui-input"
                        type="password"
                        pattern="[0-9]*"
                        placeholder="请输入新密码"
                        name="password"
                        value="{{ form.password.value|default_if_none:'' }}"
                    />
                </div>
            </div>
            {{ form.password.errors }}
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label wy-lab">确认密码</label>
                </div>
                <div class="weui-cell__bd">
                    <input
                        class="weui-input"
                        type="password"
                        placeholder="请再次输入新密码"
                        name="password_repeat"
                    />
                </div>
            </div>
        </div>
        {{ form.non_field_errors }}
        <label for="weuiAgree" class="weui-agree">
            <input
                    id="weuiAgree"
                    type="checkbox"
                    class="weui-agree__checkbox"
                    checked="checked"
            />
            <span class="weui-agree__text"
            >阅读并同意<a href="javascript:void(0);">《注册协议》</a></span
            >
        </label>
        <div class="weui-btn-area">
            <input class="weui-btn weui-btn_warn" type="submit" value="注册并登陆">
        </div>

        <div class="weui-cells__tips t-c font-12">登陆账号为您输入的手机号码</div>
    </form>
{% endblock %}
{% block footer %}
    <script type="text/javascript" src="/static/js/jquery.Spinner.js"></script>
    <script>
        $('.verify_code_img').click(function() {
            $(this).attr('src', $(this).attr('data-src') + '?t=' + new Date().getTime())
        })
    </script>
{% endblock %}
